<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="./lib/vue.js"></script>
    <style>
      /* v-enter [这是一个时间点] 是进入之前,元素的起始状态,此时还没有开始进入 */
      /* v-leave-to [这是一个时间点] 是动画离开之后,离开的终止状态,此时元素动画已经结束*/
      .v-enter,
      .v-leave-to {
        opacity: 0;
        transform: translateX(150px);
      }
      /* v-enter-active [入场动画的时间段] */
      /* v-leave-active [离场动画的时间段] */
      .v-enter-active,
      .v-leave-active {
        transition: all 0.8s ease;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <input type="button" value="toggle" @click="flag=!flag">
      <!-- 使用transition元素,把需要被动画控制的元素包裹起来 -->
      <transition>
        <h3 v-if="flag">这是一个h3</h3>
      </transition>
    </div>

    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          flag: false
        },
        methods: {

        }
      })
    </script>



  </body>
</html>
